<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-space :size="12">
          <a-button
            type="primary"
            v-auth="permissionCodeMap.channelBatchLink"
            @click="regenerateLink"
            :loading="regenerateLinkIng"
          >
            批量生成链接
          </a-button>
        </a-space>
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'switchFlag'">
          <span v-if="record.switchFlag === 1">是</span>
          <span v-else-if="record.switchFlag === 2">否</span>
        </template>
        <template v-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            class="g-operate-btn"
            v-auth="permissionCodeMap.channelView"
            @click="operateChannel(operateActionType.VIEW, record)"
          >
            查看
          </a-button>
          <a-button
            type="link"
            class="g-operate-btn"
            v-auth="permissionCodeMap.channelEdit"
            @click="operateChannel(operateActionType.EDIT, record)"
          >
            编辑
          </a-button>
        </template>
      </template>
    </BasicTable>
    <ChannelAdd @register="channelAddRegister" @operateSuccess="operateSuccess" />
  </PageWrapper>
</template>

<script setup lang="ts" name="channelManage">
import { reactive, ref, computed, unref, watch, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getChannelBasicColumns, getSearchFormConfig } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import { userStore } from '@/store/modules/user'
import ChannelAdd from './components/ChannelAdd.vue'
import { message } from 'ant-design-vue'
import { constantMap, operateActionType, operateTxtType } from '@/types/enum'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { ChannelRecord } from '@/types/system'
import api from '@/api'
const { channelList, userList, oneClickUpdateDownloadUrl } = api

const userModule = userStore()

const [channelAddRegister, { openDrawer: ChannelAddOpenDrawer, setDrawerProps }] = useDrawer()

const regenerateLinkIng = ref(false)
const [registerTable, { reload, setPagination }] = useTable({
  api: channelList,
  columns: getChannelBasicColumns(),
  useSearchForm: true,
  showIndexColumn: true,
  formConfig: getSearchFormConfig(),
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})
// 操作
function operateChannel(type: OperateType, record?: ChannelRecord) {
  if (
    userModule.permissionActionList.includes(permissionCodeMap.channelBrandConfiguration) ||
    userModule.permissionActionList.includes(permissionCodeMap.channelPackageConfiguration)
  ) {
    setDrawerProps({
      title: operateTxtType[type] + '渠道',
      showOkBtn: type !== operateActionType.VIEW,
      cancelText: type === operateActionType.VIEW ? '关闭' : '取消'
    })
    ChannelAddOpenDrawer(true, {
      type,
      record
    })
  } else {
    message.warning('无权限获取数据')
  }
}
// 重新生成下载链接
const regenerateLink = async () => {
  regenerateLinkIng.value = true
  try {
    const res = await oneClickUpdateDownloadUrl()
    regenerateLinkIng.value = false
    reload()
    message.success('批量生成链接成功')
  } catch (error) {
    regenerateLinkIng.value = false
  }
}
const operateSuccess = () => {
  reload()
}
</script>

<style scoped lang="less">
:deep(.ant-drawer-header) {
  height: 20px;
}
:deep(.ant-drawer-title) {
  font-weight: 400;
  width: 56px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #192236;
  line-height: 20px;
}
:deep(.basic-drawer) {
  .ant-drawer-body .scrollbar__wrap {
    padding-bottom: 0;
  }
}
</style>
